<template>
  <div>
    <div class="g-wrap">
      <div class="u-title">
        <h3>
          <span>全部新碟</span>
        </h3>
        <div class="tab">
          <ul>
            <li v-for="(u,i) in title" :key="i">
              <router-link :to="{name:'AlbumView',query:{area:u.area}}" :class="area===u.area?'act':''">{{u.name}}</router-link>
              <span class="line" v-if="i!==title.length-1">|</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <ul class="m-cvrlst">
      <li v-for="(item,index) in Albums" :key="index">
        <div class="u-cover">
          <img v-lazy="item.blurPicUrl" alt=""
               :title="item.name">
          <router-link :to="{name:'AlbumDetail',params:{id:item.id}}" class="msk" :title="item.name"></router-link>
          <a href="#" title="播放" class="u-name"></a>
        </div>
        <p class="first">
          <router-link :to="{name:'AlbumDetail',params:{id:item.id}}" :title="item.name">{{item.name}}</router-link>
        </p>
        <p class="second">
          <span class="nm">
            <router-link :to="{name:'Work',params:{id:item.artist.id}}" :title="item.artist.name">{{item.artist.name}}</router-link>
          </span>
        </p>
      </li>
    </ul>
    <Pagination :pageNo='pageNo' :pageSize='pageSize' :total='total' :continues='5' @getPageNo="getPageNo"></Pagination>
    <div style="height: 20px;"></div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
export default {
  name: "index",
  components:{
    Pagination
  },
  data() {
    return {
      title: [
        {
          name: '全部',
          area: 'ALL',
        },
        {
          name: '华语',
          area: 'ZH',
        },
        {
          name: '欧美',
          area: 'EA',
        },
        {
          name: '韩国',
          area: 'KR',
        },
        {
          name: '日本',
          area: 'JP',
        },
      ],
      Albums:[],
      pageSize:35,
      pageNo:1,
      type:'new',
      total:1000,
      area:''
    }
  },
  methods:{
    async reqAlbum(){
      let result = await this.$API.reqAlbumNew(this.pageSize,(this.pageNo-1)*this.pageSize,this.area)
      this.total = result.data.total
      this.Albums = result.data.albums
    },
    getPageNo(pageNo){
      this.pageNo = pageNo;
      this.reqAlbum();
    }
  },
  mounted() {
    if (this.$route.query.area){
    this.area = this.$route.query.area
    }
    this.reqAlbum()
  }
}
</script>

<style scoped lang="less">
.g-wrap {
  width: 980px;
  margin: 0 auto;

  .u-btn-hot {

    background-image: url("../../../assets/button.png");
  }

  .u-title {
    width: 900px;
    height: 42px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #C20C0C;

    h3 {
      width: 118px;
      height: 33px;
      float: left;

      span {
        font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
        font-size: 24px;
        font-weight: normal;
        float: left;
      }

      a {
        margin-left: 10px;
        border: 1px solid #C3C3C3;
        border-radius: 5px;
        display: inline-block;
        width: 91px;
        height: 31px;
        text-align: center;
        line-height: 31px;
        float: left;
        background-color: #F6F6F6;

        i {
          color: #0c73c2;
          font-weight: normal;

          em {
            display: inline-block;
            width: 8px;
            height: 5px;
            background: url("../../../assets/icon.png") -70px -543px;
          }
        }
      }
    }

   .tab{
     float: left;
     margin-top: 10px;
     ul{
       li{
         float: left;
       }
     }
     .act{
       color: #c20c0c;
     }
     a{
       color: #666;
     }
     .line{
       margin: 0 10px;
       color: #c7c7c7;
     }
   }
  }
}

.m-cvrlst {
  width: 950px;
  margin: 0 auto;
  height: auto;
  padding-bottom: 30px;
  overflow: hidden;

  li {
    width: 190px;
    height: 218px;
    margin-left: -4px;
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    &:hover .u-cover .u-name{
      display: block;
    }

    .u-cover {
      width: 130px;
      height: 130px;
      margin: 0 auto;
      position: relative;

      .msk {
        width: 153px;
        height: 130px;
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        background-image: url("../../../assets/coverall.png");
        background-position: 0 -845px;
      }

      .u-name {
        left: 94px;
        width: 28px;
        height: 28px;
        display: none;
        position: absolute;
        right: 10px;
        bottom: 5px;
        background-image: url("../../../assets/icn_ply2.png");
        background-position: 0 -140px;
      }

      img {
        width: 130px;
        height: 130px;
      }

      a {
        width: 140px;
        display: inline-block;
      }
    }

    .first {
      width: 130px;
      margin: 6px auto;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      a {
        display: inline-block;
        max-width: 100%;
        _width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
        color: #000;
        vertical-align: middle;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    .second {
      margin: 0 auto;
      width: 130px;
      display: flex;
      align-items: center;

      .nm {
        display: inline-block;
        max-width: 85%;
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;

        a {
          color: #666;
        }
      }

      img {
        width: 13px;
        height: 13px;
      }
    }

  }
}
</style>